<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const isMobileMenuOpen = ref(false)
const route = useRoute()

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 导航链接数据
const navLinks = [
  { name: '首页', path: '/shinchan' },
  { name: '故事介绍', path: '/shinchan#story' },
  { name: '人物介绍', path: '/shinchan#characters' },
  { name: '动画图库', path: '/shinchan#gallery' },
  { name: '动画角色', path: '/shinchan#characters' },
  { name: '动画评价', path: '/shinchan#comments' },
  { name: '问答精选', path: '/shinchan#qa' }
]
</script>

<template>
  <header class="bg-yellow-400 shadow-md">
    <!-- 顶部标题区域 -->
    <div class="container mx-auto px-4 py-3">
      <div class="flex items-center justify-between">
        <!-- 左侧Logo和标题 -->
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm">
            <img src="https://picsum.photos/seed/shinchan-logo/100/100" alt="蜡笔小新" class="w-8 h-8 object-cover rounded-full">
          </div>
          <h1 class="text-xl md:text-2xl font-bold text-gray-800">蜡笔小新</h1>
        </div>

        <!-- 桌面端搜索框 -->
        <div class="hidden md:flex items-center">
          <input 
            type="text" 
            placeholder="请输入搜索内容" 
            class="px-3 py-1.5 border border-gray-300 rounded-l-md text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-48 md:w-64"
          >
          <button class="px-3 py-1.5 bg-gray-800 text-white rounded-r-md text-sm hover:bg-gray-700">
            搜索
          </button>
        </div>

        <!-- 移动端菜单按钮 -->
        <button 
          class="md:hidden text-gray-800 hover:text-gray-600"
          @click="toggleMobileMenu"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 导航菜单 -->
    <nav class="bg-white border-t border-gray-200">
      <div class="container mx-auto px-4">
        <!-- 桌面端导航 -->
        <div class="hidden md:flex space-x-1 py-1">
          <a v-for="link in navLinks.slice(0, 4)" :key="link.name" :href="link.path" :class="['px-3 py-2 text-sm font-medium rounded-md', route.path === link.path || (route.path === '/shinchan' && link.path.includes('#')) ? 'bg-yellow-100 text-yellow-800' : 'text-gray-700 hover:bg-yellow-50 hover:text-yellow-600']">
            {{ link.name }}
          </a>
        </div>

        <!-- 移动端导航菜单 -->
        <div v-show="isMobileMenuOpen" class="md:hidden py-2 space-y-1">
          <a v-for="link in navLinks" :key="link.name" :href="link.path" :class="['block px-3 py-2 text-sm font-medium rounded-md', route.path === link.path || (route.path === '/shinchan' && link.path.includes('#')) ? 'bg-yellow-100 text-yellow-800' : 'text-gray-700 hover:bg-yellow-50 hover:text-yellow-600']">
            {{ link.name }}
          </a>
        </div>
      </div>
    </nav>
  </header>
</template>

<style scoped>
/* 导航栏样式 */
.header-container {
  background-color: #fbbf24;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .nav-link {
    display: block;
  }
}
</style>